/* stylelint-disable scss/dollar-variable-pattern */
@use 'sass:color';

$--color-primary-light: #3D8AFF;
$--color-primary-dark: #3D8AFF;
$--color-white-light: #fff;
$--color-white-dark: #373737;

/** background */
$--color-background-light: #fff;
$--color-background-dark: #373737;
$--color-background-deep-light: #f0f0f0;
$--color-background-deep-dark: #212121;
$--color-background-light-light: #fff;
$--color-background-light-dark: #444;
$--color-background-light-gray-light: #FAFAFA;
$--color-background-light-gray-dark: #494949;
$--color-background-light-gray-1-light: darken($--color-background-light-gray-light, 10%);
$--color-background-light-gray-1-dark: darken($--color-background-light-gray-dark, 10%);
$--color-background-light-gray-2-light: darken($--color-background-light-gray-light, 20%);
$--color-background-light-gray-2-dark: darken($--color-background-light-gray-dark, 20%);
$--color-background-light-gray-3-light: darken($--color-background-light-gray-light, 30%);
$--color-background-light-gray-3-dark: darken($--color-background-light-gray-dark, 30%);
$--color-background-light-gray-4-light: darken($--color-background-light-gray-light, 40%);
$--color-background-light-gray-4-dark: darken($--color-background-light-gray-dark, 40%);
$--color-background-light-gray-5-light: darken($--color-background-light-gray-light, 50%);
$--color-background-light-gray-5-dark: darken($--color-background-light-gray-dark, 50%);
$--color-background-light-gray-6-light: darken($--color-background-light-gray-light, 60%);
$--color-background-light-gray-6-dark: darken($--color-background-light-gray-dark, 60%);
$--color-background-light-gray-7-light: darken($--color-background-light-gray-light, 70%);
$--color-background-light-gray-7-dark: darken($--color-background-light-gray-dark, 70%);
$--color-background-light-gray-8-light: darken($--color-background-light-gray-light, 80%);
$--color-background-light-gray-8-dark: darken($--color-background-light-gray-dark, 80%);
$--color-background-light-gray-9-light: darken($--color-background-light-gray-light, 90%);
$--color-background-light-gray-9-dark: darken($--color-background-light-gray-dark, 90%);
$--color-primary-light-1-light: mix($--color-white-light, $--color-primary-light, 10%);
$--color-primary-light-1-dark: mix($--color-white-dark, $--color-primary-dark, 10%);
$--color-primary-light-2-light: mix($--color-white-light, $--color-primary-light, 20%);
$--color-primary-light-2-dark: mix($--color-white-dark, $--color-primary-dark, 20%);
$--color-primary-light-3-light: mix($--color-white-light, $--color-primary-light, 30%);
$--color-primary-light-3-dark: mix($--color-white-dark, $--color-primary-dark, 30%);
$--color-primary-light-4-light: mix($--color-white-light, $--color-primary-light, 40%);
$--color-primary-light-4-dark: mix($--color-white-dark, $--color-primary-dark, 40%);
$--color-primary-light-5-light: mix($--color-white-light, $--color-primary-light, 50%);
$--color-primary-light-5-dark: mix($--color-white-dark, $--color-primary-dark, 50%);
$--color-primary-light-6-light: mix($--color-white-light, $--color-primary-light, 60%);
$--color-primary-light-6-dark: mix($--color-white-dark, $--color-primary-dark, 60%);
$--color-primary-light-7-light: mix($--color-white-light, $--color-primary-light, 70%);
$--color-primary-light-7-dark: mix($--color-white-dark, $--color-primary-dark, 70%);
$--color-primary-light-8-light: mix($--color-white-light, $--color-primary-light, 80%);
$--color-primary-light-8-dark: mix($--color-white-dark, $--color-primary-dark, 80%);
$--color-primary-light-9-light: mix($--color-white-light, $--color-primary-light, 90%);
$--color-primary-light-9-dark: mix($--color-white-dark, $--color-primary-dark, 90%);
$--color-background-second-light: #fff;
$--color-background-second-dark: #424242;

/** text */
$--color-text-regular-light: #1f2d3d;
$--color-text-regular-dark: #EAEAEA;

/** border */
$--color-border-light-light: #dfe4ed;
$--color-border-light-dark: #555;

/** table-border */
$--table-border-light: 1px solid #dfe6ec;
$--table-border-dark: 1px solid #dfe6ec;

[data-theme="light"],
::before,
::after {
  --color-primary: #3D8AFF;
  --color-white: #fff;

  /** background */
  --color-background: #fff;
  --color-background-deep: #f0f0f0;
  --color-background-light: #fff;
  --color-background-light-gray: #FAFAFA;
  --color-background-light-gray-1: #{$--color-background-light-gray-1-light};
  --color-background-light-gray-2: #{$--color-background-light-gray-2-light};
  --color-background-light-gray-3: #{$--color-background-light-gray-3-light};
  --color-background-light-gray-4: #{$--color-background-light-gray-4-light};
  --color-background-light-gray-5: #{$--color-background-light-gray-5-light};
  --color-background-light-gray-6: #{$--color-background-light-gray-6-light};
  --color-background-light-gray-7: #{$--color-background-light-gray-7-light};
  --color-background-light-gray-8: #{$--color-background-light-gray-8-light};
  --color-background-light-gray-9: #{$--color-background-light-gray-9-light};
  --color-primary-light-1: #{$--color-primary-light-1-light};
  --color-primary-light-2: #{$--color-primary-light-2-light};
  --color-primary-light-3: #{$--color-primary-light-3-light};
  --color-primary-light-4: #{$--color-primary-light-4-light};
  --color-primary-light-5: #{$--color-primary-light-5-light};
  --color-primary-light-6: #{$--color-primary-light-6-light};
  --color-primary-light-7: #{$--color-primary-light-7-light};
  --color-primary-light-8: #{$--color-primary-light-8-light};
  --color-primary-light-9: #{$--color-primary-light-9-light};
  --color-background-second: #fff;

  /** toolbar */
  --color-toolbar-gap: #E6E6E6;

  /** text */
  --color-text-regular: #1f2d3d;
  --color-text-regular-current: #fff;

  /** border */
  --color-border-light: #dfe4ed;

  /** table-border */
  --table-border: 1px solid #dfe6ec;
}

[data-theme="dark"],
::before,
::after {
  --color-primary: #3D8AFF;
  --color-white: #373737;

  /** background */
  --color-background: #373737;
  --color-background-deep: #212121;
  --color-background-light: #444;
  --color-background-light-gray: #494949;
  --color-background-light-gray-1: #{$--color-background-light-gray-1-dark};
  --color-background-light-gray-2: #{$--color-background-light-gray-2-dark};
  --color-background-light-gray-3: #{$--color-background-light-gray-3-dark};
  --color-background-light-gray-4: #{$--color-background-light-gray-4-dark};
  --color-background-light-gray-5: #{$--color-background-light-gray-5-dark};
  --color-background-light-gray-6: #{$--color-background-light-gray-6-dark};
  --color-background-light-gray-7: #{$--color-background-light-gray-7-dark};
  --color-background-light-gray-8: #{$--color-background-light-gray-8-dark};
  --color-background-light-gray-9: #{$--color-background-light-gray-9-dark};
  --color-primary-light-1: #{$--color-primary-light-1-dark};
  --color-primary-light-2: #{$--color-primary-light-2-dark};
  --color-primary-light-3: #{$--color-primary-light-3-dark};
  --color-primary-light-4: #{$--color-primary-light-4-dark};
  --color-primary-light-5: #{$--color-primary-light-5-dark};
  --color-primary-light-6: #{$--color-primary-light-6-dark};
  --color-primary-light-7: #{$--color-primary-light-7-dark};
  --color-primary-light-8: #{$--color-primary-light-8-dark};
  --color-primary-light-9: #{$--color-primary-light-9-dark};
  --color-background-second: #424242;

  /** toolbar */
  --color-toolbar-gap: #656970;

  /** text */
  --color-text-regular: #EAEAEA;
  --color-text-regular-current: #fff;

  /** border */
  --color-border-light: #555;

  /** table-border */
  --table-border: 1px solid #dfe6ec;
}
